<template>
  <div class="room-card" @click="goRoom">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img :src="roomTypeItem.roomUrl" class="image" />
      <div class="room-content">
        <span class="room-type">{{ roomTypeItem.roomType }}</span>
        <div class="bottom clearfix">
          <p class="room-desc">{{ roomTypeItem.description }}</p>
        </div>
      </div>
      <p class="price" style="color: #fff;">￥<span>{{ roomTypeItem.price }}</span></p>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'RoomCard',
  props: ['roomTypeItem'],
  data () {
    return {
    }
  },
  methods: {
    goRoom () {
      if (this.roomTypeItem.leisureRoomList.length === 0) {
        this.$message.warning(this.roomTypeItem.roomType + ' 暂无房间')
        return
      }
      this.$router.push(`/user/roomDetails?roomTypeId=${this.roomTypeItem.roomTypeId}&roomId=${this.roomTypeItem.leisureRoomList[0].roomId}&roomNumber=${this.roomTypeItem.leisureRoomList[0].roomNumber}`)
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  position: relative;
  margin: 10px;
  overflow: visible;
  width: 100%;
  height: 300px;

  .image {
    width: 100%;
    height: 200px;
  }

  .room-content {
    padding: 14px;
  }

  .room-desc {
    margin-top: 10px;
    font-size: 12px;
  }
}

.price {
  position: absolute;
  bottom: -10px;
  left: 25%;
  width: 50%;
  background-color: #677b82;
  text-align: center;
  z-index: 10;
}
</style>
